<.settings_tiles>
  <.tile docs="users-roles">
    <:title>
      <a id="update-name#changing-the-name-of-a-team">Team name</a>
    </:title>
    <:subtitle>
      Change the name of your team.
    </:subtitle>
    <.form
      :let={f}
      action={Routes.settings_path(@conn, :update_team_name)}
      for={@team_name_changeset}
      method="post"
    >
      <.input
        readonly={@current_team_role not in [:owner, :admin]}
        type="text"
        field={f[:name]}
        label="Name"
        width="w-1/2"
        mt?={false}
      />

      <.button type="submit" disabled={@current_team_role not in [:owner, :admin]}>
        Change name
      </.button>
    </.form>
  </.tile>
  <.tile
    docs="users-roles#managing-team-member-roles"
    current_user={@current_user}
    current_team={@current_team}
    feature_mod={Plausible.Billing.Feature.Teams}
  >
    <:title>
      <a id="team-members">Team members</a>
    </:title>
    <:subtitle>
      Add or remove team members and adjust their roles.
    </:subtitle>
    {live_render(@conn, PlausibleWeb.Live.TeamManagement,
      id: "team-setup",
      session: %{"mode" => "team-management"}
    )}
  </.tile>
  <.tile :if={@current_team_role == :owner} docs="2fa#require-all-team-members-to-enable-2fa">
    <:title>
      <a id="force-2fa">Force Two-Factor Authentication (2FA)</a>
    </:title>
    <:subtitle>
      Increase account security by requiring all team members to enable 2FA.
    </:subtitle>

    <div
      :if={@force_2fa_enabled? and @current_team_role == :owner}
      id="disable-force-2fa"
      x-data="{disableTeamForce2FAOpen: false}"
    >
      <.form
        action={Routes.settings_path(@conn, :disable_team_force_2fa)}
        for={@conn.params}
        method="post"
      >
        <.button
          theme="danger"
          x-on:click="disableTeamForce2FAOpen = true; $refs.disableTeamForce2FAPassword.value = ''"
          mt?={false}
        >
          Stop Forcing 2FA
        </.button>

        <PlausibleWeb.Components.TwoFactor.modal
          id="disable-force-2fa-modal"
          state_param="disableTeamForce2FAOpen"
          form_data={@conn.params}
          form_target={Routes.settings_path(@conn, :disable_team_force_2fa)}
          title="Stop enforcing 2FA?"
        >
          <:icon>
            <Heroicons.shield_exclamation class="h-6 w-6" />
          </:icon>
          <:buttons>
            <.button type="submit" class="w-full sm:w-auto">
              Stop enforcing 2FA
            </.button>
          </:buttons>

          <div class="text-sm mt-2">
            This will remove the 2FA requirement for all team members.
          </div>

          <div class="text-sm mt-2">
            Enter your password to stop enforcing 2FA.
          </div>

          <div class="mt-3">
            <.input
              type="password"
              id="disable_team_force_2fa_password"
              name="password"
              value=""
              placeholder="Enter password"
              x-ref="disableTeamForce2FAPassword"
            />
          </div>
        </PlausibleWeb.Components.TwoFactor.modal>
      </.form>
    </div>

    <div :if={not @force_2fa_enabled? and @current_team_role == :owner} id="enable-force-2fa">
      <.form
        action={Routes.settings_path(@conn, :enable_team_force_2fa)}
        for={@conn.params}
        method="post"
      >
        <.button
          data-confirm="All team members, including you, will need to set up 2FA. Are you sure you want to enforce it?"
          type="submit"
          mt?={false}
        >
          Enforce 2FA
        </.button>
      </.form>
    </div>
  </.tile>
  <.tile docs="users-roles#leaving-team">
    <:title>Leave team</:title>
    <:subtitle>Remove yourself from this team as a member.</:subtitle>
    <.button_link
      data-confirm="Are you sure you want to leave this team?"
      href={Routes.settings_path(@conn, :leave_team)}
      method="post"
      theme="danger"
      mt?={false}
    >
      Leave team
    </.button_link>
  </.tile>
</.settings_tiles>
